<template>
  <div class="main">
    <PureTableBar class="list_hei">
      <template #buttons>
        <el-button type="primary" @click="ApplyCreditScore()"> 新建评级模型 </el-button>
      </template>
      <template v-slot="{ size, checkList }">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading" size="small"
          :data="dataList" :columns="columns" :checkList="checkList" :pagination="pagination" max-height="600"
          :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          <template #operation="{ row }">
            <el-button type="primary" size="small" text @click="ShowReportDestail(row)"> 查看详情 </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>
  </div>
  <ReDialog :width="1000" :height="500" :models="CreditVisible" @Closes="CloseVisible()">
    <template #header>
      <h2 style="text-align: center;">新建评级模型</h2>
    </template>
    <template #main>
      <el-scrollbar height="420px">
        <el-form :model="formData" label-width="150px">
          <el-form-item label="模型名称：" prop="EnterpriseName">
            <el-input placeholder="模型名称" v-model.trim="formData.modelName" class="!w-[300px]" />
          </el-form-item>
          <el-form-item label="客户类型：" prop="legalName">
            <el-radio-group v-model="formData.customerType" class="ml-4">
              <el-radio label="CompanyCustomers" size="large">公司客户</el-radio>
              <el-radio label="RetailCustomers" size="large">零售客户</el-radio>
            </el-radio-group>
          </el-form-item>
          <div v-if="formData.customerType == 'CompanyCustomers'">
            <div v-for="(item, index) in companyList" style="margin-bottom:70px">
              <el-form-item label="评级等级：">
                <el-select v-model="item.level" class="!w-[300px]">
                  <el-option v-for="type in companySelectData.levelList" :key="type.selectId" :label="type.selectId
                  " :value="type.selectId" v-show="!type.disabled"
                    @click="updateLevelSelect(item.level, 'company')" />
                </el-select>
              </el-form-item>
              <el-form-item label="所属国标行业：">
                <el-select v-model="item.industry" :multiple="true" class="!w-[300px]">
                  <el-option v-for="type in companySelectData.industyList" :key="type.selectId" :label="type.selectId
                  " :value="type.selectId" />
                </el-select>
              </el-form-item>
              <!-- 公司财务指标 -->
              <el-form-item label="财务指标：">
                <el-checkbox-group v-model="finanItems[index]">
                  <el-checkbox v-for="(t) in companySelectData.financialIndicatorsSelectList.fieldData"
                    :key="t.apiFieldInfoId" :label="t.apiFieldInfoId"
                    @change="changeSelectCompanyFinan(t, item, index)">{{
                      t.remark
                    }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <div v-for="a in item.financialIndicatorsList">
                <div v-if="a.filedType == 'number'" style="display:flex;margin-bottom: 10px;">
                  <span class="selectLeft">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListSelect" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-input v-model.trim="a.confirmSelectValue" style="width:100px;margin-left:30px" />
                </div>
                <div v-else style="display:flex;margin-bottom: 10px;">
                  <span class="selectLeft">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListInput" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-select v-model="a.confirmSelectValue" style="width:400px;margin-left:30px"
                    :multiple="a.dataSetType == 4">
                    <el-option v-for=" type in a.selection" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                </div>
              </div>
              <!-- 公司竞争指标 -->
              <el-form-item label="竞争指标：">
                <el-checkbox-group v-model="competItems[index]">
                  <el-checkbox v-for="(t) in companySelectData.competitiveIndicatorsSelectList.fieldData"
                    :key="t.apiFieldInfoId" :label="t.apiFieldInfoId"
                    @change="changeSelectCompanyCompet(t, item, index)">{{
                      t.remark
                    }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <div v-for="a in item.competitiveIndicatorsList">
                <div v-if="a.filedType == 'number'" style="display:flex;margin-bottom:10px;">
                  <span class="selectLeft">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListSelect" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-input v-model.trim="a.confirmSelectValue" style="width:100px;margin-left:30px" />
                </div>
                <div v-else style="display:flex;margin-bottom: 10px;">
                  <span class="selectLeft">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListInput" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-select v-model="a.confirmSelectValue" style="width:400px;margin-left:30px"
                    :multiple="a.dataSetType == 4">
                    <el-option v-for="type in a.selection" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                </div>
              </div>
              <!-- 公司信用指标 -->
              <el-form-item label="信用指标：">
                <el-checkbox-group v-model="creditItems[index]">
                  <el-checkbox v-for="(t) in companySelectData.creditIndicatorsSelectList.fieldData"
                    :key="t.apiFieldInfoId" :label="t.apiFieldInfoId"
                    @change="changeSelectCompanyCredit(t, item, index)">{{
                      t.remark
                    }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <div v-for="a in item.creditIndicatorsList">
                <div v-if="a.filedType == 'number'" style="display:flex;margin-bottom:10px;">
                  <span class="selectLeft">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListSelect" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-input v-model.trim="a.confirmSelectValue" style="width:100px;margin-left:30px" />
                </div>
                <div v-else style="display:flex;margin-bottom: 10px;">
                  <span class="selectLeft">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListInput" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-select v-model="a.confirmSelectValue" style="width:400px;margin-left:30px"
                    :multiple="a.dataSetType == 4">
                    <el-option v-for="type in a.selection" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                </div>
              </div>
            </div>

            <div style="display: flex; margin-left: 65px;" class="cursor-pointer">
              <CirclePlusFilled class="iocn" @click="addLevel" />
              <span style="height: 60px; line-height: 60px; color: #409Eff;" @click="addLevel">添加评级等级</span>
            </div>
            <div style="display: flex; margin-left: 65px;" class="cursor-pointer">
              <RemoveFilled class="delete_icon" @click="deleteCompany()" />
              <span style="height: 60px; line-height: 60px; color: red" @click="deleteCompany()">删除评级等级</span>
            </div>
          </div>
          <div v-if="formData.customerType == 'RetailCustomers'">
            <div v-for="(item, index) in retailList" style="margin-bottom:70px">
              <el-form-item label="评级等级：">
                <el-select v-model="item.level" class="!w-[300px]">
                  <el-option v-for="type in retailSelectData.levelList" :key="type.selectId" :label="type.selectId
                  " :value="type.selectId" v-show="!type.disabled"
                    @click="updateLevelSelect(item.level, 'retail')" />
                </el-select>
              </el-form-item>
              <el-form-item label="贷款类型：">
                <el-select v-model="item.loan" class="!w-[300px]">
                  <el-option v-for="type in retailSelectData.loanTypeList" :key="type.selectId" :label="type.selectId
                  " :value="type.selectId" />
                </el-select>
              </el-form-item>
              <!-- 零售资产指标 -->
              <el-form-item label="资产指标：">
                <el-checkbox-group v-model="assetItems[index]">
                  <el-checkbox v-for="(t) in retailSelectData.assetIndexList.fieldData" :key="t.apiFieldInfoId"
                    :label="t.apiFieldInfoId" @change="changeSelectRetailFinan(t, item, index)">{{
                      t.remark
                    }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <div v-for="a in item.financialIndicatorsList">
                <div v-if="a.filedType == 'number'" style="display:flex;margin-bottom: 10px;">
                  <span class="selectLeft">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListSelect" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-input v-model.trim="a.confirmSelectValue" style="width:100px;margin-left:30px" />
                </div>
                <div v-else style="display:flex;margin-bottom: 10px;">
                  <span class="selectLeft">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListInput" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-select v-model="a.confirmSelectValue" style="width:400px;margin-left:30px"
                    :multiple="a.dataSetType == 4">
                    <el-option v-for=" type in a.selection" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                </div>
              </div>
              <!-- 征信指标 -->
              <el-form-item label="征信指标：">
                <el-checkbox-group v-model="credit1Items[index]">
                  <el-checkbox v-for="(t) in retailSelectData.creditIndexList.fieldData" :key="t.apiFieldInfoId"
                    :label="t.apiFieldInfoId" @change="changeSelectRetailCompet(t, item, index)">{{
                      t.remark
                    }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <div v-for="a in item.competitiveIndicatorsList">
                <div v-if="a.filedType == 'number'" style="display:flex;margin-bottom:10px;">
                  <span class="selectLeft">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListSelect" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-input v-model.trim="a.confirmSelectValue" style="width:100px;margin-left:30px" />
                </div>
                <div v-else style="display:flex;margin-bottom: 10px;">
                  <span class="selectLeft">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListInput" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-select v-model="a.confirmSelectValue" style="width:400px;margin-left:30px"
                    :multiple="a.dataSetType == 4">
                    <el-option v-for="type in a.selection" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                </div>
              </div>
              <!-- 稳定性指标 -->
              <el-form-item label="稳定性指标：">
                <el-checkbox-group v-model="stabilityItems[index]">
                  <el-checkbox v-for="(t) in retailSelectData.stabilityIndexList.fieldData" :key="t.apiFieldInfoId"
                    :label="t.apiFieldInfoId" @change="changeSelectRetailCredit(t, item, index)">{{
                      t.remark
                    }}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <div v-for="a in item.creditIndicatorsList">
                <div v-if="a.filedType == 'number'" style="display:flex;margin-bottom:10px;">
                  <span class="selectLeft">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListSelect" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-input v-model.trim="a.confirmSelectValue" style="width:100px;margin-left:30px" />
                </div>
                <div v-else style="display:flex;margin-bottom: 10px;">
                  <span class="selectLeft">{{ a.remark }}</span>
                  <el-select v-model="a.confirmSelect" style="width: 150px">
                    <el-option v-for="type in operationListInput" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                  <el-select v-model="a.confirmSelectValue" style="width:400px;margin-left:30px"
                    :multiple="a.dataSetType == 4">
                    <el-option v-for="type in a.selection" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" />
                  </el-select>
                </div>
              </div>
            </div>

            <div style="display: flex; margin-left: 65px;" class="cursor-pointer">
              <CirclePlusFilled class="iocn" @click="addLevel1" />
              <span style="height: 60px; line-height: 60px; color: #409Eff;" @click="addLevel1">添加评级等级</span>
            </div>
            <div style="display: flex; margin-left: 65px;" class="cursor-pointer">
              <RemoveFilled class="delete_icon" @click="deleteRetail()" />
              <span style="height: 60px; line-height: 60px; color: red" @click="deleteRetail()">删除评级等级</span>
            </div>
          </div>
        </el-form>
      </el-scrollbar>
    </template>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="SubmitVisible()" :loading="BtnLoading" type="primary">确定</el-button>
        <el-button @click="CloseVisible()"> 取消 </el-button>
      </span>
    </template>
  </ReDialog>
  <ReDialog :width="800" :height="500" :models="showVisible" @Closes="showVisible = false">
    <template #header>
      <h2 style="text-align: center;">查看评级模型</h2>
    </template>
    <template #main>
      <el-scrollbar height="420px">
        <div class="centered">
          <el-form label-width="150px">
            <el-form-item label="模型名称：">
              {{ showTittle }}
            </el-form-item>
            <el-form-item label="客户类型：" prop="legalName">
              {{ showType == 'CompanyCustomers' ? '公司客户' : '零售客户' }}
            </el-form-item>
            <div v-if="showType == 'CompanyCustomers'">
              <div v-for="(item, index) in showList" style="margin-bottom:70px">
                <el-form-item label="评级等级：">
                  <el-select v-model="item.level" disabled>
                    <el-option v-for="type in companySelectData.levelList" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" v-show="!type.disabled" />
                    <el-option label="无" value="no" disabled />
                  </el-select>
                </el-form-item>
                <el-form-item label="所属国标行业：">
                  {{ item.industry }}
                </el-form-item>
                <!-- 公司财务指标 -->
                <el-form-item label="财务指标：" v-if="item.financialIndicatorsList.length">
                  <div class="div-wrapper">
                    <div v-for="a in item.financialIndicatorsList" class="custom-div">
                      {{ a.remark }} &nbsp;&nbsp;{{ a.operatorStr }}&nbsp;&nbsp; {{ a.parameterValue }}
                    </div>
                  </div>
                </el-form-item>
                <!-- 公司竞争指标 -->
                <el-form-item label="竞争指标：" v-if="item.competitiveIndicatorsList.length">
                  <div class="div-wrapper">
                    <div v-for="a in item.competitiveIndicatorsList" class="custom-div">
                      {{ a.remark }}&nbsp;&nbsp; {{ a.operatorStr }}&nbsp;&nbsp; {{ a.parameterValue }}
                    </div>
                  </div>
                </el-form-item>
                <el-form-item label="信用指标：" v-if="item.creditIndicatorsList.length">
                  <div class="div-wrapper">
                    <div v-for="a in item.creditIndicatorsList">
                      {{ a.remark }} &nbsp;&nbsp;{{ a.operatorStr }} &nbsp;&nbsp;{{ a.parameterValue }}
                    </div>
                  </div>
                </el-form-item>
              </div>
            </div>
            <div v-else>
              <div v-for="(item, index) in showList" style="margin-bottom:70px">
                <el-form-item label="评级等级：">
                  <el-select v-model="item.level" disabled>
                    <el-option v-for="type in retailSelectData.levelList" :key="type.selectId" :label="type.selectId
                    " :value="type.selectId" v-show="!type.disabled" />
                    <el-option label="无" value="no" disabled />
                  </el-select>
                </el-form-item>
                <el-form-item label="贷款类型：">
                  {{ item.loanType }}
                </el-form-item>
                <!-- 零售资产指标 -->
                <el-form-item label="资产指标：" v-if="item.assetList.length">
                  <div class="div-wrapper">
                    <div v-for="a in item.assetList">
                      {{ a.remark }}&nbsp;&nbsp; {{ a.operatorStr }} &nbsp;&nbsp;{{ a.parameterValue }}
                    </div>
                  </div>
                </el-form-item>
                <!-- 征信指标 -->
                <el-form-item label="征信指标：" v-if="item.credit1List.length">
                  <div class="div-wrapper">
                    <div v-for="a in item.credit1List">
                      {{ a.remark }} &nbsp;&nbsp;{{ a.operatorStr }} &nbsp;&nbsp;{{ a.parameterValue }}
                    </div>
                  </div>
                </el-form-item>
                <!-- 稳定性指标 -->
                <el-form-item label="稳定性指标：" v-if="item.stabilityList.length">
                  <div class="div-wrapper">
                    <div v-for="a in item.stabilityList">
                      {{ a.remark }} &nbsp;&nbsp;{{ a.operatorStr }} &nbsp;&nbsp;{{ a.parameterValue }}
                    </div>
                  </div>
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
      </el-scrollbar>
    </template>
  </ReDialog>
</template>
<script setup lang="ts">
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import {
  CirclePlusFilled,
  RemoveFilled
} from "@element-plus/icons-vue";
import { useBuildInternal } from "./hook/buildInternalModel";
import { ref, reactive, nextTick, watch } from "vue";
const {
  dataList,
  loading,
  CreditVisible,
  pagination,
  columns,
  formData,
  handleCurrentChange,
  handleSizeChange,
  ApplyCreditScore,
  SubmitVisible,
  CloseVisible,
  companyList,
  retailList,
  companySelectData,
  retailSelectData,
  operationListInput,
  operationListSelect,
  changeSelectCompanyFinan,
  changeSelectCompanyCompet,
  changeSelectCompanyCredit,
  changeSelectRetailFinan,
  changeSelectRetailCompet,
  changeSelectRetailCredit,
  addLevel,
  finanItems,
  competItems,
  creditItems,
  assetItems,
  credit1Items,
  stabilityItems,
  updateSelectors,
  updateLevelSelect,
  addLevel1,
  ShowReportDestail,
  BtnLoading,
  showList,
  showType,
  showTittle,
  showVisible,
  deleteCompany,
  deleteRetail
} = useBuildInternal()
</script>

<style lang="scss" scoped>
@import url(@/style/CreditComm.scss);

.iocn {
  width: 60px;
  font-size: 20px;
  display: inline-block;
  padding: 15px;
  color: #409Eff;
}

.selectLeft {
  width: 150px;
  margin-left: 155px;
  margin-right: 30px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
}


:deep(.el-form-item__label) {
  font-weight: 700
}

:deep(.el-checkbox-group) {
  display: flex;
  flex-wrap: wrap;
}

.div-wrapper {
  display: inline-block;
}

.div-wrapper .custom-div {
  text-align: start;
  margin-right: 10px;
  /* 可适当调整间距大小 */
  margin-bottom: 10px;
  /* 可适当调整间距大小 */
}

.delete_icon {
  width: 60px;
  font-size: 20px;
  display: inline-block;
  padding: 15px;
  color: red;
}

// .centered {
//   display: flex;
//   justify-content: center;
//   align-items: center;
//   /* 可以根据需要调整垂直居中的高度 */
// }
</style>
